<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        code{
            width: 500px;
        }
    </style>
</head>
<body>
    <h1>认识GSAP</h1>
    <h2>一、GSAP是什么？</h2>
        <p>
            GSAP是GreenSock提供的一个制作动画的成熟的JavaScript库，该库源于Flash的动画。
            GSAP中有很多工具和插件，我们可以利用它们来快速开发Web动画和快速处理开发Web动画遇到的任何挑战。
            除了GSAP具有强大的特性、工具和插件之外，而且学习曲线也相对较浅，因为它在所有不同的实现和插件中使用了直观且一致的语法。此外，GSAP论坛还提供了很棒的文档、教程等。
        </p>
    <h2>二、为什么选择GSAP？</h2>
        <ul>
            <li>速度快： GSAP专门优化了动画性能，使用实现和CSS一样的高性能动效著作权归作者所有。</li>
            <li>轻量和模块化： 模块化与插件式的结构保持了GSAP核心引擎的轻量，TweenLite包非常的小。GSAP还提供了 TweenLite、 TimelineLite、 TimelineMax、 TweenMax等功能动画模块，在使用的时候可以按需加载</li>
            <li>没有依赖： 使用GSAP开发动效时不需要依赖于任何第三方库或插件著作权归作者所有。</li>
            <li>灵活控制： 不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动效著作权归作者所有。</li>
            <li>任何对象都可以实现动画，只要能运行JavaScript脚本的地方就可以使用GSAP著作权归作者所有。</li>
            <li>
                非常的灵活，可以适用于你给它的任何东西。
                <p>
                    CSS： CSS中的2D和3D方面的transform、color、width、opacity、border-radius、margin等，几乎所有的CSS属性都可以
                    SVG： SVG中的一些属性，比如viewBox、width、height、fill、stroke、cx、r、opacity等，而且借助像 MorphSVG 和 DrawSVG这样的GSAP插件，
                    还可以实现一些高级的效果: 任何数值，比如canvas的对象，3D动画场景中的摄像机位置和滤镜值
                </p>
            </li>
        </ul>
    <h2>三、GSAP核心模块</h2>
        <ul>
            <li>TweenLite：GSAP的基础，一个轻量级和快速的HTML5动画库</li>
            <li>TweenMax：TweenLite的扩展，除了包括TweenLite本身之外，还包括TimelineLite、TimelineMax、CSSPlugin、AttrPlugin、RoundPropsPlugin、DirectionalRotationPlugin、BezierPlugin和EasePack</li>
            <li>TimelineLite：一种轻量级的Timeline，用于控制多个Tween和（或）其他Timeline</li>
            <li>TimelineMax：一个增强版的TimelineLite，它提供了额外的、非必要的功能，如repeat、repeatDelay和yoyo等等</li>
        </ul>
    <h2>四、GSAP如何工作？</h2>
        <h4>加载GSAP</h4>
            <ul>
                <li>
                    <p>最简单的就是加载一个CDN的地址</p>
                    <p><code><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script></code></p>
                </li>
                <li>
                    <p>可以使用NPM或Yarn来安装</p>
                    <p><code>npm install gsap</code></p>
                </li>
                <li>
                    <p>在Codepen上引入GSAP核心库</p>
                </li>
            </ul>
            <p><a href="https://greensock.com/docs/v3/Installation#CDN">工具</a></p>
        <h4><a href="https://greensock.com/docs/v3/GSAP">GSAP常见基本API</a></h4>
            <h5>gsap.to()</h5> 
                <p>可以是控制元素样式的属性参数，也可以是控制动画的一些属性参数, 还可以是控制动效的一些CSS属性</p>
                <textarea>
                    backgroundColor: 'red' 
                    borderRadius: 15

                    x: 100 // ──> transform: translateX(100px) 
                    y: 100 // ──> transform: translateY(100px) 
                    z: 100 // ──> transform: translateZ(100px) 

                    scale: 2 // ──> transform: scale(2) 
                    scaleX: 2 // ──> transform: scaleX(2) 
                    scaleY: 2 // ──> transform: scaleY(2) 
                    scaleZ: 2 // ──> transform: scaleZ(2) 

                    skew: 15 // ──> transform: skew(15deg) 
                    skewX: 15 // ──> transform: skewX(15deg) 
                    skewY: 15 // ──> transform: skewY(15deg) 

                    rotation: 180 // ──> transform: rotate(180deg) 
                    rotationX: 180 // ──> transform: rotateX(180deg) 
                    rotationY: 180 // ──> transform: rotateY(180deg) 
                    rotationZ: 180 // ──> transform: rotateZ(180deg) 

                    perspective: 1000 // ──> transform: perspective(1000px) 
                    transformOrigin: '50% 50%' // ──> transform-origin: 50% 50%

                    duration: 2 // ──> animation-duration: 2s 
                    delay: 1 // ──> animation-delay: 1s 
                    ease: 'linear' // ──> animation-timing-function: linear 
                    repeat: 2 // ──> animation-iteration-count: 2
                </textarea>
            <h5>gsap.from()</h5> 
                <p>可以用来设置动画元素动画开始的位置（结束的位置是元素当前状态，即动画元素在屏幕上的状态</p>
                <p>能用于gsap.to()的属性和方法同样可以运用于gsap.from()</p>
            <h5>gsap.fromTo()</h5>
                <p>允许你定义动画对象初始状态和结束状态。相当于gsap.from()和gsap.to()两个方法的结合物</p>
            <h5>gasp.set()</h5>
                <p>立即设置一些属性,本质就是一个持续时间为0到gsap.to()的补间动画</p>
            <h5>gsap.defaults()</h5>
                <p>设置所有补间动效所需要的参数,如果你在特定的补间动画中重新显式设置了与gsap.defaults()相同的属性，则会覆盖</p>
            <h5>gsap.config()</h5>
                <p>做一些统一的配置</p>
            <h5>gsap.timeline()</h5>
                <p>时间线（Timeline）是一个强大的时序控制工具，它包括了Tweens和时间线容器，使用它可以简单地控制多个动画之间的时间。如果没有Timeline的话，构建复杂的序列动画就会很麻烦，因为只能靠每个动效的延迟时间和持续时间来控制</p>
        <h4>GSAP控制动画的方法</h4>
            <p>在Web Animation API中Animation提供了多个方法用来控制动画，比如cancel()、finish()、pause()、play()等。在GSAP中，同样有一些类似的方法，用来控制动画。</p>
            <textarea>
                // 创建一个动画 
                let tween = gsap.to('.ball',{duration: 1, x: 100}); // 或 gsap.timeline(...) 创建动画; 

                // GSAP控制动画的方法 
                tween.play() // ──> 播放 
                .pause() // ──> 暂停 
                .resume() // ──> 继续播放 
                .reverse() // ──> 反方向播放 
                .restart() // ──> 重新播放 
                .timeScale(2) // ──> 2 = 两倍速度, 0.5 = 半速 
                .seek(1.5) // ──> 跳转到时间（秒）或标签 
                .progress(0.5) // ──> 跳转到一半 
                .totalProgress(0.8) // ──> 包括重复 
                
                // 当用作setter时，返回动画（链） 
                
                // 其他有用的方法 (tween 和 timeline) 
                .kill() // ──> 立即销毁 
                .isActive() // ──> 如果当前正在播放动画，返回true 
                .then() // ──> Promise 
                .invalidate() // ──> 清除记录的开始、结束值 
                .eventCallback() // ──> 获取或设置一个事件回调
                
                // timeline:具体方法 
                // add 标签, tween, timeline 或 callback 
                .add(thing, position) 

                // 在指定点调用函数 
                .call(func, params, position) 
                
                // 获取时间轴的子元素数组 
                .getChildren() 
                
                // 空的timeline 
                .clear() 
                
                // 动画播放头到一个位置线性 
                .tweenTo(timeOrLabel, {vars}) 
                
                // ^^ 有开始和结束的位置 
                .tweenFromTo(from, to, {vars})
            </textarea>
        <h4><a href="https://greensock.com/docs/v3/Eases">GSAP中的缓动函数</a></h4>
            <p>在CSS的animation和transition中可以使用animation-timing-function和transition-timing-function来指定动效的缓动效果。简单地说就是用来控制动效在过渡期间的变化速度。在CSS的animation和transition中有几个固定的缓动函数，即linear、ease、ease-in、ease-in-out、ease-out和cubic-bezier()等。在GSAP中，控制动效的缓动函数ease要强大的多</p>
</body>
</html>